<template>
  <div v-loading="loading">
    <div class="header-search cad-box">
      <el-input
        v-model="searchValue.name"
        style="width: 20%; margin-right: 20px"
        clearable
        placeholder="请输入课程名称"
      />
      <el-select
        v-if="curPosition.roleName === '园长'"
        v-model="searchValue.type"
        placeholder="请选择类型"
        style="width: 20%; margin-right: 20px"
        clearable
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="searchValue.createTime"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <!-- <el-date-picker
        v-model="searchValue.createTime"
        style="width: 20%; margin: 0px 20px"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="选择日期"
        clearable
      /> -->
      <el-button type="primary" @click="handleCourseList">搜 索</el-button>
    </div>

    <div class="content-table cad-box">
      <div>
        <div class="box_list">
          <div
            v-if="dataList.length === 0"
            style="margin: 0px auto; padding: 20px 0px; color: grey"
          >
            暂无内容
          </div>
          <div
            v-for="item in dataList"
            :key="item.num"
            class="box_item"
            @click="handleGetDetail(item.id)"
          >
            <div class="box_img">
              <el-image
                style="width: 100%; height: 150px"
                :src="item.courseCover"
                :fit="'fill'"
              />
            </div>
            <div class="box_text">{{ item.name }}</div>
            <div
              class="box_num"
              style="display: flex; justify-content: space-between"
            >
              <div>{{ item.courseNumber }}次学习</div>
              <div>{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: right">
        <el-pagination
          :current-page="pagination.pageNum"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { addPlayCount, courseList } from './api'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      value1: '',
      loading: false,
      searchValue: {
        name: '',
        type: '',
        createTime: ''
      },
      options2: [
        {
          label: '负责人培训',
          value: 1
        },
        {
          label: '保育人员培训',
          value: 2
        }
      ],
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  computed: {
    ...mapGetters(['curPosition'])
  },
  created () {
    this.handleCourseList()
  },
  mounted () {},
  methods: {
    async handleAddPlayCount (id) {
      await addPlayCount({
        id: id
      })
    },
    async handleCourseList () {
      const res = await courseList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        name: this.searchValue.name,
        type: this.curPosition.roleName === '园长' ? this.searchValue.type : 2,
        startTime: this.searchValue.createTime[0],
        endTime: this.searchValue.createTime[1]
      })
      this.dataList = res.records
      this.total = Number(res.total)
    },
    handleGetDetail (id) {
      this.handleAddPlayCount(id)
      this.$router.push(`/government/directorDetail?id=${id}`)
    },
    onSubmit () {},
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagination.pageSize = val
      this.handleCourseList()
    },

    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagination.pageNum = val
      this.handleCourseList()
    }
  }
}
</script>

<style scoped lang="scss">
.header-search {
  display: flex;
  margin-bottom: 30px;

  .select-box {
    width: 20%;
    margin: 0 20px;
  }
}

.content-table {
  .box_list {
    display: flex;
    justify-content: flex-start; /* 可根据需要调整 */
    flex-wrap: wrap; /* 默认值，确保所有项目在一行 */
    .box_item {
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #ebebee;

      width: 20%;
      // flex: 1 1 23%; /* 根据实际情况调整，这里设定每个项目占据23%宽度，考虑到间距 */
      margin: 20px 2%; /* 如果有间距需求，可以添加左右外边距 */
      box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
      .box_text {
        padding: 0px 10px;
        margin-top: 10px;
        display: -webkit-box;
        /* 必须结合的属性 */
        -webkit-box-orient: vertical;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2;
        line-height: 1.5;
        /* 显示的行数 */
        overflow: hidden;
        /* 隐藏超出的内容 */
        text-overflow: ellipsis;
        /* 溢出内容显示为省略号 */
      }
      .box_num {
        margin-top: 10px;
        padding: 10px;
      }
    }
  }
  .state-box {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
  }
}

.img-title {
  font-size: 15px;
  font-weight: bold;
  margin: 20px 0;
}
.img-box {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(50px, 1fr)
  ); /* 自适应列数，每列最小宽度150px */
  grid-gap: 20px; /* 设置每个图片之间的间距 */
}

.title-box {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 20px;
}

.border-box-item {
  border: 1px solid #eeeef0;
  border-radius: 5px;
  background-color: #fafafc;
  padding: 20px 20px;
  margin-bottom: 20px;
  color: black;
  span {
    color: #b0b0b2;
    font-size: 15px;
  }

  .message-box {
    display: flex;
    margin-bottom: 20px;
  }
}
</style>
